<template>
    <!-- 添加或修改凭证信息对话框 -->
    <el-drawer :title="title" :visible.sync="open" append-to-body
               custom-class="kingmon-drawer" @closed="cancel">
        <div class="kingmon-drawer__content">
          <el-form ref="form" :model="form" :rules="rules" label-width="150px">
            <el-form-item label="授权类型" prop="accessTarget">
              <el-radio-group v-model="form.accessTarget" :disabled="isModify||disableAccessType">
                <el-radio-button :label="item.value" v-for="item in dict.type.kw_credential_access_type">
                  {{ item.label }}
                </el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="凭证名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入凭证名称" style="width: 200px"/>
            </el-form-item>
            <el-form-item label="用户名" prop="username">
              <el-input v-model="form.username" placeholder="请输入用户名" style="width: 200px"/>
            </el-form-item>
            <el-form-item label="密码" prop="password" v-if="isModify">
              <el-input type="password" v-model="form.password"
                        auto-complete="off"
                        placeholder="为空表示不修改密码" style="width: 200px"/>
            </el-form-item>
            <el-form-item label="密码" prop="secret" v-else>
              <el-input type="password" v-model="form.secret"
                        auto-complete="off"
                        placeholder="请输入密码" style="width: 200px"/>
            </el-form-item>
            <el-form-item label="凭证描述" prop="description">
              <el-input v-model="form.description" type="textarea" placeholder="请输入凭证描述" />
            </el-form-item>
          </el-form>
        </div>
        <div class="kingmon-drawer__footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
    </el-drawer>
</template>

<script>
import { getCredential, addCredential, updateCredential } from "@/api/credential/credential";

export default {
  name: "AddCredential",
  dicts: ['kw_credential_access_type'],
  props:["id","disableAccessType"],
  data() {
    return {
      // 弹出层标题
      title: "",
      passwordHolder:"",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {accessTarget:"host"},
      // 表单校验
      rules: {
        accessTarget: [
          { required: true, message: "凭证类型不能为空", trigger: "blur" }
        ],
        name: [
          { required: true, message: "凭证名称不能为空", trigger: "blur" }
        ],
        username: [
          { required: true, message: "用户名不能为空", trigger: "blur" }
        ],
        secret: [
          { required: true, message: "密码不能为空", trigger: "blur" }
        ],
      }
    };
  },
  created() {
    if(this.id){
      this.title = "修改凭证";
      this.handleUpdate()
    }else{
      this.title = "添加凭证";
    }
    this.open = true;
  },
  computed:{
    isModify(){
      return this.id && this.id!=null && this.id!="";
    },
  },
  methods: {
    // 取消按钮
    cancel(data) {
      this.$emit("closeDrawer", data)
      this.open = false;
    },
    /** 修改按钮操作 */
    handleUpdate() {
      const id = this.id;
      getCredential(id).then(response => {
        this.form = response.data;
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            if(this.form.password !=""){
              this.form.secret=this.form.password;
            }
            updateCredential(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.cancel(response.data)
            });
          } else {
            addCredential(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.cancel(response.data)
            });
          }
        }
      });
    },
  }
};
</script>
